<template>
	<div class="person">
		<h1>中国</h1>
		<h2 ref="title">北京</h2>
		<button @click="show">点我输出h2这个元素</button>
	</div>
</template>

<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script setup name="Person">
	import {ref} from 'vue'
	
	// 创建一个title，用于存储ref标记的内容
	let title = ref()
	
	function show() {
		console.log(title.value)
	}
	
	let name = ref('张三')
	let age = ref(18)
	// 使用defineExpose将组件中的数据交给外部
	defineExpose({name, age})
</script>

<style scoped>
	.person {
		background-color: skyblue;
		box-shadow: 0 0 10px;
		border-radius: 10px;
	}
	
	button {
		margin: 0 5px;
	}
</style>